<template>
  <div class="home-contain">
    <van-nav-bar title="校园动态" fixed />
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <Item
        v-for="item in newsList"
        :key="item.id"
        :title="item.title"
        :author="item.author"
        :time="item.time"
        :isNew="item.isNew"
        :isHot="item.isHot"
        :articleHerf="item.articleHerf"
      ></Item>
    </van-pull-refresh>
    <van-divider>暂无更多</van-divider>
  </div>
</template>

<script>
import Item from "@/components/newsItem.vue";
export default {
  components: {
    Item,
  },
  data() {
    return {
      isLoading: false,
      // 模拟从数据库获取来的新闻列表数据，渲染到页面上
      newsList: [
        {
          id: 1,
          title: "北京石景山区：娱乐场所和地下各类活动场所暂不开放",
          time: "2022年06月19日 21:48",
          author: "北京日报",
          isNew: false,
          isHot: true,
          articleHerf: "/#/detail",
        },
        {
          id: 2,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-13  07:00:00",
          author: "教务处",
          isNew: true,
        },
        {
          id: 3,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-14  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 4,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-15  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 5,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-16  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 6,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-17  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 7,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-18  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 8,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-19  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 9,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-20  07:00:00",
          author: "教务处",
          isNew: false,
        },
        {
          id: 10,
          title: "关于最近学校对防疫措施的部署的一封公告信",
          time: "2022-05-21  07:00:00",
          author: "教务处",
          isNew: false,
        },
      ],
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.van-nav-bar {
  background-color: orange;
}
/deep/.van-nav-bar__title {
  color: white;
}
.home-contain {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
